<template>
  <div>
    <van-cell>
      <!-- 标题区域的插槽 -->
      <template #title>
        <div class="title-box">
          <!-- 标题 -->
          <span>{{title}}</span>
          <!-- 单张图片 -->
          <img v-lazy="cover.images[0]" alt="" class="thumb" v-if="cover.type === 1">
        </div>
        <!-- 三张图片 -->
        <div class="thumb-box" v-if="cover.type === 3">
          <img v-lazy="item" v-for="(item,i) in cover.images" :key="i" alt="" class="thumb" >

        </div>
      </template>
      <!-- label 区域的插槽 -->
      <template #label>
        <div class="label-box">
         <span>{{author}} &nbsp;&nbsp; {{comment}}评论 &nbsp;&nbsp; {{pubdate | dateFormat}}</span>
          <!-- 关闭按钮 -->
          <van-icon name="cross"   @click.stop="show = true" />
        </div>
      </template>
    </van-cell>

<van-action-sheet v-model="show" cancel-text="取消" :closeable="false"  @closed="isFirst = true" get-container="body">
  <!-- 第一级反馈面板 -->
  <div v-if="isFirst">
    <van-cell :title="item.name" clickable class="center-title" v-for="item in actions" :key="item.name" @click="onCellClick(item.name)" />
  </div>
  <!-- 第二级反馈面板 -->
  <div v-else>
      <van-cell title="返回" clickable title-class="center-title" @click="isFirst = true" />
    <van-cell :title="item.label" clickable title-class="center-title" v-for="item in reports" :key="item.type" />
  </div>
</van-action-sheet>
  </div>
</template>

<script>
import reports from '../API/reports.js'
import { dislike } from '../API/HomeApi.js'
// 按需导入 API 接口
// import { dislikeArticleAPI } from '../API/articlesAPI'
export default {
  name: 'articleInfo',
  props: {
    id: {
      Type: Number,
      request: true
    },
    title: {
      Type: String,
      default: ''
    },
    comment: {
      Type: Number,
      default: 0
    },
    pubdate: {
      Type: String,
      default: ''
    },
    author: {
      Type: String,
      default: ''
    },
    cover: {
      Type: Object,
      default: function () {
        return { type: 0 }
      }
    }
    // 文章的信息对象

  },
  data () {
    return {
      show: false,
      isFirst: true,
      reports,
      actions: [
        { name: '不感兴趣' },
        { name: '反馈垃圾内容' },
        { name: '拉黑作者' }
      ]
    }
  },

  methods: {
    shutdown (event) {
      console.log(event)
    },
    getDetail (id) {
      console.log(id)
    },
    async onCellClick (name) {
      if (name === '不感兴趣') {
        const { data: res } = await dislike(this.id.toString())
        if (res.message === 'OK') {
          this.$emit('remove_art', this.id)
        }

        this.show = false
      } else if (name === '反馈垃圾内容') {
        this.isFirst = false
        const { data: res } = await dislike(this.id.toString())
        if (res.message === 'OK') {
          this.$emit('remove_art', this.id)
        }

        console.log(name)
      } else if (name === '拉黑作者') {
        console.log(name)
        const { data: res } = await dislike(this.id.toString())
        if (res.message === 'OK') {
          this.$emit('remove_art', this.id)
        }
        this.show = false
      }
    }
  }

}
</script>

<style lang="less" scoped>
.label-box {
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.center-title {
  text-align: center;
}
.thumb {
  // 矩形黄金比例：0.618
width: 113px;
  height: 70px;
  background-color: #f8f8f8;
  object-fit: cover;
}

.title-box {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
}

.thumb-box {
  display: flex;
  justify-content: space-between;
}
</style>
